<template>
	<!--通讯录-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 搜索 + 导航 +弹框 -->
			<w-sel-search 
			topType="three"
			 ref="navTab"
			:is_tip="true" 
			:is_r_i="true" 
			@handleActive="handleActive"
			@tosearch="tosearch"
			@toadd="toadd"
			@tolink="tolink"
			@changeTab="changeTab" >
			</w-sel-search>
		</view>
		
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper class="page-body" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(item,index) in objlist" :key="index">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation
					:scroll-into-view="toView">
					<template v-if="item && item.length > 0 ">
						<!--通讯列表-->
						<w-phones :phones="item" @paramClick="paramClick" :is_shrink="is_shrink" :leftNavAdd="true"
							@leftAdd="leftAdd('tip')" @todetail="todetail"></w-phones>
						
					</template>
					<!--无数据-->
					<empty v-else no-full type="noData"></empty>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
		<!--左侧导航隐藏按钮-->
		<view class="page-button" @click="navShow(is_shrink)">
			<image class="page-button-icon" :src="$mAssetsPath.icon_xianxing"></image>
		</view>
		<!--弹窗-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit">编辑</view>
				<view class="w-con">
					<view class="input-row">
						<input class="input-row-w" type="text" v-model="searchVal" placeholder="请输入编辑内容"
							confirm-type="search" placeholder-style="color:#999"></input>
						<image class="icon-tb3" v-if="searchVal!=''" @click.stop="clear"
							:src="$mAssetsPath.icon_qingchu"></image>
					</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	const util = require('../../common/util2.js');
	import wPopup from '@/components/w-popup/w-popup2.vue'; //弹窗
	import wSelSearch from '@/components/w-sel-logo/w-sel-search.vue'; //标题+导航+搜索
	import wPhones from '@/components/w-phones/phone-directory.vue'; //通讯列表
	export default {
		name: "phones",
		components: {
			wSelSearch,
			wPhones,
			wPopup
		},
		data() {
			return {
				userType:'c', //c-公司 d-供应商
				searchVal: '', //编辑
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				is_shrink: true,
				objlist:[[{
						id: 1,
						no: 'A',
						name: '公司成员',
						pho: [{
							uid: 56,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "阿坝"
						}, {
							uid: 57,
							post: "副经理",
							head: '/static/img/im/face/face_2.jpg',
							name: "阿克苏"
						}, {
							uid: 58,
							post: "主管",
							head: '/static/img/im/face/face_3.jpg',
							name: "阿拉善盟"
						}, {
							uid: 59,
							post: "",
							head: '/static/img/im/face/face_4.jpg',
							name: "阿勒泰"
						}, {
							uid: 60,
							post: "",
							head: '/static/img/im/face/face_5.jpg',
							name: "阿里"
						}, {
							uid: 61,
							post: "",
							head: '/static/img/im/face/face_6.jpg',
							name: "安康"
						}, {
							uid: 62,
							post: "",
							head: '/static/img/im/face/face_7.jpg',
							name: "安庆"
						}, {
							uid: 63,
							post: "",
							head: '/static/img/im/face/face_8.jpg',
							name: "鞍山"
						}, {
							uid: 64,
							post: "",
							head: '/static/img/im/face/face_9.jpg',
							name: "安顺"
						}, {
							uid: 65,
							post: "",
							head: '/static/img/im/face/face_10.jpg',
							name: "安阳"
						}, {
							uid: 338,
							post: "",
							head: '/static/img/im/face/face_11.jpg',
							name: "阿城"
						}, {
							uid: 339,
							post: "",
							head: '/static/img/im/face/face_12.jpg',
							name: "安福"
						}, {
							uid: 340,
							post: "",
							head: '/static/img/im/face/face_13.jpg',
							name: "安吉"
						}, {
							uid: 341,
							post: "",
							head: '/static/img/im/face/face_14.jpg',
							name: "安宁"
						}, {
							uid: 342,
							post: "",
							head: '/static/img/im/face/face_15.jpg',
							name: "安丘"
						}],
					},
					{
						id: 2,
						no: 'B',
						name: '设计部',
						pho: [{
							uid: 1,
							post: "",
							head: '/static/img/im/face/face_19.jpg',
							name: "北京"
						}, {
							uid: 66,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "白城"
						}, {
							uid: 67,
							post: "",
							head: '/static/img/im/face/face_2.jpg',
							name: "百色"
						}, {
							uid: 68,
							post: "",
							head: '/static/img/im/face/face_3.jpg',
							name: "白山"
						}, {
							uid: 69,
							post: "",
							head: '/static/img/im/face/face_4.jpg',
							name: "白银"
						}, {
							uid: 70,
							post: "",
							head: '/static/img/im/face/face_5.jpg',
							name: "蚌埠"
						}, {
							uid: 71,
							post: "",
							head: '/static/img/im/face/face_6.jpg',
							name: "保定"
						}],
					},
					{
						id: 3,
						no: 'C',
						name: '产品部',
						pho: [{
							uid: 2,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "重庆"
						}, {
							uid: 5,
							post: "组长",
							head: '/static/img/im/face/face_2.jpg',
							name: "长春"
						}, {
							uid: 6,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "长沙"
						}, {
							uid: 7,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "常州"
						}, {
							uid: 8,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "成都"
						}, {
							uid: 84,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "沧州"
						}, {
							uid: 85,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "常德"
						}, {
							uid: 86,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昌都"
						}, {
							uid: 87,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昌吉"
						}],
					},
					{
						id: 4,
						no: 'D',
						name: '产品部',
						pho: [{
							uid: 25,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昆明"
						}, {
							uid: 174,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开封"
						}, {
							uid: 175,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "喀什地"
						}, {
							uid: 176,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "克拉玛依"
						}, {
							uid: 177,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "克孜勒"
						}, {
							uid: 555,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开化"
						}, {
							uid: 556,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开平"
						}, {
							uid: 557,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开县"
						}, {
							uid: 558,
							post: "副经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "开阳"
						}, {
							uid: 559,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "康平"
						}, {
							uid: 560,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "垦利"
						}, {
							uid: 561,
							post: "kunshan",
							head: '/static/img/im/face/face_1.jpg',
							name: "昆山"
						}]
					}, {
						id: 5,
						no: 'E',
						name: '产品部',
						pho: [{
							uid: 203,
							post: "maanshan",
							head: '/static/img/im/face/face_1.jpg',
							name: "马鞍山"
						}, {
							uid: 204,
							post: "maoming",
							head: '/static/img/im/face/face_1.jpg',
							name: "茂名"
						}]
					}
				],[{
						id: 1,
						no: 'A',
						name: '供应商一',
						pho: [{
							uid: 56,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "阿坝"
						}, {
							uid: 57,
							post: "副经理",
							head: '/static/img/im/face/face_2.jpg',
							name: "阿克苏"
						}, {
							uid: 58,
							post: "主管",
							head: '/static/img/im/face/face_3.jpg',
							name: "阿拉善盟"
						}, {
							uid: 59,
							post: "",
							head: '/static/img/im/face/face_4.jpg',
							name: "阿勒泰"
						}, {
							uid: 60,
							post: "",
							head: '/static/img/im/face/face_5.jpg',
							name: "阿里"
						}, {
							uid: 61,
							post: "",
							head: '/static/img/im/face/face_6.jpg',
							name: "安康"
						}, {
							uid: 62,
							post: "",
							head: '/static/img/im/face/face_7.jpg',
							name: "安庆"
						}, {
							uid: 63,
							post: "",
							head: '/static/img/im/face/face_8.jpg',
							name: "鞍山"
						}, {
							uid: 64,
							post: "",
							head: '/static/img/im/face/face_9.jpg',
							name: "安顺"
						}, {
							uid: 65,
							post: "",
							head: '/static/img/im/face/face_10.jpg',
							name: "安阳"
						}, {
							uid: 338,
							post: "",
							head: '/static/img/im/face/face_11.jpg',
							name: "阿城"
						}, {
							uid: 339,
							post: "",
							head: '/static/img/im/face/face_12.jpg',
							name: "安福"
						}, {
							uid: 340,
							post: "",
							head: '/static/img/im/face/face_13.jpg',
							name: "安吉"
						}, {
							uid: 341,
							post: "",
							head: '/static/img/im/face/face_14.jpg',
							name: "安宁"
						}, {
							uid: 342,
							post: "",
							head: '/static/img/im/face/face_15.jpg',
							name: "安丘"
						}],
					},
					{
						id: 2,
						no: 'B',
						name: '供应商二',
						pho: [{
							uid: 1,
							post: "",
							head: '/static/img/im/face/face_19.jpg',
							name: "北京"
						}, {
							uid: 66,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "白城"
						}, {
							uid: 67,
							post: "",
							head: '/static/img/im/face/face_2.jpg',
							name: "百色"
						}, {
							uid: 68,
							post: "",
							head: '/static/img/im/face/face_3.jpg',
							name: "白山"
						}, {
							uid: 69,
							post: "",
							head: '/static/img/im/face/face_4.jpg',
							name: "白银"
						}, {
							uid: 70,
							post: "",
							head: '/static/img/im/face/face_5.jpg',
							name: "蚌埠"
						}, {
							uid: 71,
							post: "",
							head: '/static/img/im/face/face_6.jpg',
							name: "保定"
						}],
					},
					{
						id: 3,
						no: 'C',
						name: '供应商三',
						pho: [{
							uid: 2,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "重庆"
						}, {
							uid: 5,
							post: "组长",
							head: '/static/img/im/face/face_2.jpg',
							name: "长春"
						}, {
							uid: 6,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "长沙"
						}, {
							uid: 7,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "常州"
						}, {
							uid: 8,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "成都"
						}, {
							uid: 84,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "沧州"
						}, {
							uid: 85,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "常德"
						}, {
							uid: 86,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昌都"
						}, {
							uid: 87,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昌吉"
						}],
					},
					{
						id: 4,
						no: 'D',
						name: '供应商四',
						pho: [{
							uid: 25,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "昆明"
						}, {
							uid: 174,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开封"
						}, {
							uid: 175,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "喀什地"
						}, {
							uid: 176,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "克拉玛依"
						}, {
							uid: 177,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "克孜勒"
						}, {
							uid: 555,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开化"
						}, {
							uid: 556,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开平"
						}, {
							uid: 557,
							post: "",
							head: '/static/img/im/face/face_1.jpg',
							name: "开县"
						}, {
							uid: 558,
							post: "副经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "开阳"
						}, {
							uid: 559,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "康平"
						}, {
							uid: 560,
							post: "经理",
							head: '/static/img/im/face/face_1.jpg',
							name: "垦利"
						}, {
							uid: 561,
							post: "kunshan",
							head: '/static/img/im/face/face_1.jpg',
							name: "昆山"
						}]
					}, {
						id: 5,
						no: 'E',
						name: '供应商五',
						pho: [{
							uid: 203,
							post: "maanshan",
							head: '/static/img/im/face/face_1.jpg',
							name: "马鞍山"
						}, {
							uid: 204,
							post: "maoming",
							head: '/static/img/im/face/face_1.jpg',
							name: "茂名"
						}]
					}
				]],
				
				noData: false,
				toView: '', //回到顶部id
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1], //第几个swiper的第几页
				
			}
		},
		methods: {
			confirm(){
				
			},
			//点击导航
			handleActive(active){
				console.log(123,active)
				if(active===1){
					this.userType = 'c'
				}else if(active===2){
					this.userType = 'd'
				}
			},
			//弹窗跳转
			tolink(type){
				if(type==='a'){
					uni.navigateTo({
						url:`/pages/contact/contactInvite`
					})
				}else if(type==='b'){
					uni.navigateTo({
						url:`/pages/contact/contactSearch`
					})
				}else if(type==='c'){
					uni.navigateTo({
						url:`/pages/contact/editTeams?type=${type}`
					})
				}else if(type==='d'){
					uni.navigateTo({
						url:`/pages/contact/editTeams?type=${type}`
					})
				}
			},
			//增加左侧导航
			leftAdd(type) {
				this['show' + type] = true;
				this.content1 = 'center';
				this.type1 = 'center';
			},
			//左侧导航收缩
			navShow(is_shrink) {
				console.log(111, is_shrink)
				this.is_shrink = !is_shrink
			},
			paramClick(e) {
				console.log(121, e)
			},
			//增加弹窗
			toadd(type) {
				this['show' + type] = true;
				this.content1 = 'center';
				this.type1 = 'top';
			},
			//跳转详细页
			todetail(uid){
				uni.navigateTo({
					url:`/pages/contact/contactDetailInfo?id=${uid}&userType=${this.userType}`
				})
			},
			//跳转搜索页面
			tosearch() {
				uni.navigateTo({
					url: `/pages/contact/contactSearch`
				})
			},
			change1(e) {
				console.log(233, e)
				if (!e.show) {
					this.showtip = false
					this.showshare = false
				}
			},
			//取消
			cancel(type) {
				this['show' + type] = false
			},
			//清空
			clear() {
				this.searchVal = '';
			},
			changeTab(index) {
				this.currentTab = index;
			},
			// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
			isRequest() {
				return new Promise((resolve, reject) => {
					this.pages[this.currentTab]++
					var that = this
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
						})
						let newData = ['新数据1', '新数据2', '新数据3']
						resolve(newData)
					}, 1000)
				})
			},
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {
				console.log(`加载${this.currentTab}`) //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.isRequest().then((res) => {
					let tempList = this.objlist
					tempList[this.currentTab] = tempList[this.currentTab].concat(res)
					console.log(tempList)
					this.objlist = tempList
					this.$forceUpdate() //二维数组，开启强制渲染
				})
			}, 300),
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			isRefresh() {
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					this.$refs.refresh.endAfter() //刷新结束调用
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 80vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 60rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;

				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}

				.input-row-w {
					padding-left: 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
					width: calc(100% - 74rpx);
				}
			}
		}
	}
	
	/* 提示窗口 */
	.w-tip2 {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 290rpx;
		border-radius: 10rpx;
		background-color: #fff;
		overflow: hidden;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 80rpx auto ;
	
		.w-con {
			display: flex;
			flex-direction: column;
			text-align: center;
			font-weight: 400;
			border-bottom: 1rpx solid #f5f5f5;
			padding: 0 30rpx;
			.w-con-box{
				display: flex;
				align-items: center;
				height: 100rpx;
				border-bottom: 1rpx solid #f5f5f5;
				.box-icon{
					width: 28rpx;
					height: 28rpx;
					margin-right: 30rpx;
				}
				.box-txt{
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-3;
				}
			}
			.w-con-box:last-of-type{
				border-bottom: none;
			}
		}
	}

	.page-button {
		width: 80rpx;
		height: 80rpx;
		left: 50rpx;
		bottom: 300rpx;
		position: fixed;
		background: $uni-but-bg-color;
		box-shadow: 2rpx 4rpx 14rpx rgba(25, 143, 255, 0.4);
		border-radius: 50%;
		z-index: 11;
		display: flex;
		justify-content: center;
		align-items: center;

		.page-button-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-body {
			display: flex;
			flex-direction: column;
			height: calc(100% - 90rpx - var(--status-bar-height));
		}

		.page-top {
			border-bottom: 1rpx solid $uni-bg-color-grey;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
		}
	}
</style>
